<template>
  <div class="myButton">
    <el-button-group>
      <el-button
        :disabled="disabled"
        :icon="icon"
        :loading="loading"
        :plain="plain"
        :round="round"
        :size="size"
        :type="type"
        @click="handleClick"
        v-if="options.length===0"
      >
        <span v-if="text!==''">{{text}}</span>
      </el-button>
      <el-button :disabled="item.disabled || disabled"
                 :icon="item.icon || icon"
                 :key="item.text"
                 :loading="item.loading || loading"
                 :plain="item.plain || plain"
                 :round="item.round || round"
                 :size="size"
                 :type="item.type || type"
                 @click.native="item.handleClick(item) || handleClick(item)"
                 v-else-if="options.length>0"
                 v-for="item in options"
      >
        <span v-if="text!==''">{{item.text || text}}</span>
      </el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: 'myButton',
  props: {
    // 当前组件选项，多个按钮传入
    options: {
      type: Array,
      default () {
        return []
      }
    },
    // 当前按钮类型primary / success / warning / danger / info / text
    type: {
      type: String,
      default () {
        return 'primary'
      }
    },
    // 当前按钮上的文字
    text: {
      type: [String, Number],
      default () {
        return '按钮'
      }
    },
    // 当前按钮绑定方法
    handleClick: {
      type: Function,
      default () {

      }
    },
    // 是否朴素按钮
    plain: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 是否圆角按钮
    round: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 图标类名
    icon: {
      type: String,
      default () {
        return ''
      }
    },
    // 是否加载中状态
    loading: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 是否禁用状态
    disabled: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 当前组件大小
    size: {
      type: String,
      default () {
        return 'medium'
      }
    }
  },
  created () {
  }
}
</script>

<style lang="scss">
  .myButton {
    .el-button-group {
      width: 100%;
    }
  }
</style>
